今日文章目錄

• 需求說明
• 事前準備
• 重點說明
• 參考資料

DAY12練習ToDoList分類項目，遇到重複點擊完成鈕，資料無法同時在三種清單上同時更新。
昨晚想了一下，決定重新調整寫法。所以今天一樣是ToDoList奮鬥日記

需求說明

• 三種頁籤清單：全部、未完成、已完成。
• 每個清單內的li都要可以重複點擊完成鈕，並同時更新對應分類。
• 新增 優先清單 標籤：1、2、3

事前準備

• 清單資料都會依據陣列內的資料，去 render 視覺畫面。

    const listData = [];         // 全部清單
    let unfinishedListData = []; // 未完成清單
    let finishedListData = [];   // 已完成清單

• 規劃存放資料的架構如下：

const listData =[
    {
        id: 1, // 這次練習是用 Math.random() 產生隨機數，但其實還是有可能重複。
        value: "Learn JS",
        status: "unfinished", // 篩選分類清單依據
        priority: 1, // 調整排列順序依據
    },
    ...
];

• 步驟記錄：
  1.拿到的資料，會先建立上方對應資料
  2.push加入listData
  3.依照 priority重新排列listData
  3.依據listData，篩選(filter)出未完成、已完成資料
  4.render 畫面
  5.監聽deleteBtn，參數傳入：該li。點擊執行以下動作：
  - 找到目標項目
  - 修改資料： listData
  - 修改樣式： toDoList
  - 依據 修正後的 listData，重新篩選未完成、已完成資料
  - re-render 畫面
• codepen 練習：https://codepen.io/chen-chens/pen/ExXXZMW?editors=0010
• 顯示效果：
  
• 依照目前的寫法，不管是在哪一頁頁籤取消或點擊完成鈕，都會同步更新到相對應的清單分類中。也會將優先順序較高的排列在最上面。

重點說明

• sort(compareFunction):
  • 作用對象：陣列
  • 用途：依照比對要求做排列。
  • 參數：compareFunction(optional)，函式會有兩個參數代表作用陣列項目，依照比較內容做排序。
  • 返回值：修改後的原陣列
• filter((element, index, targetArray)=>{}):
  • 作用對象：陣列
  • 用途：依照測試函式，篩選出符合條件的所有元素。
  • 參數：一測試函式，該函式包含三個參數：
    • element：目前作用元素
    • index(optional)：目前作用元素索引
    • targetArray：作用陣列
  • 返回值：包含符合條件的***全新陣列***;如果沒有一個符合，返回空陣列[]
• find((element, index, targetArray)=>{}):
  • 作用對象：陣列
  • 用途：依照測試函式，篩選出第一個符合條件的元素。
  • 參數：一測試函式，該函式包含三個參數：
    • element：目前作用元素
    • index(optional)：目前作用元素索引
    • targetArray(optional)：作用陣列
  • 返回值：如果有符合元素，返回第一個符合元素;如果沒有一個符合，返回 undefined
• findIndex((element, index, targetArray)=>{}):
  • 作用對象：陣列
  • 用途：依照測試函式，篩選出第一個符合條件的元素索引。
  • 參數：一測試函式，該函式包含三個參數：
    • element：目前作用元素
    • index(optional)：目前作用元素索引
    • targetArray(optional)：作用陣列
  • 返回值：如果有符合元素，返回第一個符合元素索引;如果沒有一個符合，返回 -1

參考資料

• How to Bind Event Listeners to Dynamically-Created Elements in JavaScript
• MDN - Array.prototype.filter()
• MDN - Array.prototype.sort()
• MDN - Array.prototype.find()
• MDN - Array.prototype.findIndex()

明日預告：